class Car {
  constructor() {
    this.add()
    this.select()
    // this.var()
    // 获取tbody
    this.$$('#cartTable tbody').addEventListener('click', this.frame.bind(this))


  }
  frame(event) {
    let tar = event.target
    tar.classList.contains('check-one') && this.shop(tar)
    tar.classList.contains('add') && this.addcat(tar)
    tar.classList.contains('delete') && this.dele(tar)
    tar.classList.contains('reduce') && this.re(tar)

  }
  // static bul() {
  //   //获取里面的值
  //   let su = document.querySelector('.count-input')
  //   let price = document.querySelector('.price')
  //   let pc = document.querySelector('.subtotal')
  //   let input=document.querySelectorAll('.check-one')
  //   let sum=document.querySelector('#selectedTotal')
  //   let tol=document.querySelector('#priceTotal')
  //   // 遍历
  //   input.forEach(ite=>{
  //     if(ite.checked){

  //     }
  //   })
   
    
  //   let val = su.value - 0
  //   let pr = price.innerHTML - 0
    
  //   pc.innerHTML = (val * pr).toFixed(2)
  //   console.log(price.innerHTML)
  //   let summ = 0
  //   let pi = 0
  //   // 遍历input
  //   input.forEach(item => {
  //     // console.log(item)
  //     // 判断input的状态,如果是选中
  //     if (item.checked) {
  //       summ += val
  //       // console.log(su)
  //       pi += pc.innerHTML-0
  //     }
  //   })
  // //   //获取总件数和合计的元素,把值追加在里面
  //  sum.innerHTML = summ
  //  tol.innerHTML = pi
  //  发送请求更新数据
  // axios.patch('http://localhost:3000/shop/' + idd2, {
  //   total: val
  // })


  // }
  // 获取数据
  async add() {
    // 获取购物车里面的值
    let {
      data
    } = await axios.get('http://localhost:3000/shop')

    this.page(data)
  }
  // 追加在页面上
  page(data) {
    // 遍历数组
    let html = ''
    data.forEach(elem => {
      console.log(elem)
      // if() return
      html += `<tr idd=${elem.id}>
        <td class="checkbox">
          <input class="check-one" type="checkbox" />
        </td>
        <td class="goods">
          <img src="${elem.src}" alt="" />
          <span>${elem.name}</span>
        </td>
        <td class="price">${elem.price}</td>
        <td class="count">
          <span class="reduce">-</span>
          <input class="count-input" type="text" value="${elem.total}"  />
          <span class="add">+</span>
        </td>
        <td class="subtotal">${elem.price*elem.total}</td>
        <td class="operation">
          <span class="delete">删除</span>
        </td>
      </tr>`
    })
    this.$$('#cartTable tbody').innerHTML = html
  }
  // 全选
  select() {
    // 获取元素
    let btn = this.$('.check-all')
    // console.log(btn)
    // 绑定事件
    btn[0].addEventListener('click', this.bt.bind(this, 1))
    btn[1].addEventListener('click', this.bt.bind(this, 0))
  }
  // 两个全选按钮绑定事件
  bt(numb, event) {
    // console.log(numb)
    // 如果当前状态为选中
    let stu = event.target.checked
    // 另外一个也选中
    this.$('.check-all')[numb].checked = stu
    this.choice(stu)
    this.addprice()
  }
  // 单选框
  choice(stu) {
    // 获取元素
    let sw = Array.from(this.$('.check-one'))
    // console.log(sw)
    // 遍历单选框
    sw.forEach(ite => {
      console.log(ite)
      ite.checked = stu
    })

  }
  // 单个商品选中
  shop(tar) {
    // 如果取消
    if (!tar.checked) {
      this.$('.check-all')[0].checked = false
      this.$('.check-all')[1].checked = false
    }
    // 如果被选中
    let cont = 0
    // 遍历
    this.$('.check-one').forEach(item => {
      item.checked && cont++
    })
    if (cont == this.$('.check-one').length) {
      this.$('.check-all')[0].checked = true
      this.$('.check-all')[1].checked = true
    }
    this.addprice()
  }
  // 商品的总数量以及总价格
  addprice() {
    // 申明两个变量储存数量和总价格
    let sum = 0
    let price = 0
    // 遍历input
    console.log(this.$('.check-one'))
    this.$('.check-one').forEach(item => {
      // console.log(item)
      // 判断input的状态,如果是选中
      if (item.checked) {
        // 找到tr
        let tr = item.parentNode.parentNode
        // console.log(tr)
        // console.log(item, tr)
        // 通过tr找到数量和小计
        sum += (tr.querySelector('.count-input').value - 0)
        // console.log(su)
        price += (tr.querySelector('.subtotal').innerHTML - 0)


      }
    })
    //获取总件数和合计的元素,把值追加在里面
    this.$$('#selectedTotal').innerHTML = sum
    this.$$('#priceTotal').innerHTML = price
  }
  // 增加单个商品的数量
  addcat(tar) {
    // console.log(111)
    let tr = tar.parentNode.parentNode
    console.log(tr)
    let idd2 = tr.getAttribute('idd')
    console.log(idd2)
    // 获取数量里面的值
    let num = tar.previousElementSibling
    // console.log(num)
    num.value = num.value - 0 + 1
    console.log(num.value) //num的值是字符串，减0转为数字

    let numb = Number(num.value)
    console.log(numb)
    // 获取单价和小计
    let price = tar.parentNode.previousElementSibling
    // 取值
    price = price.innerHTML - 0
    console.log(price)
    let subtotal = tar.parentNode.nextElementSibling
    // 赋值
    subtotal.innerHTML = (price * num.value).toFixed(2)
    tar.parentNode.parentNode.querySelector('.check-one').checked && this.addprice()
    // console.log(tar.parentNode.parentNode.getAttribute('idd'))
    this.cll(idd2, numb)
  }
  // 发送请求更新数据库里面的数据
  async cll(id, nu) {
    let res = await axios.patch('http://localhost:3000/shop/' + id, {
      total: nu
    })

  }
  // 减少单个商品的数量
  re(tar) {
    console.log(111)
    let tr = tar.parentNode.parentNode
    console.log(tr)
    let idd2 = tr.getAttribute('idd')
    // 获取数量里面的值
    let num = tar.nextElementSibling

    num.value = num.value - 0 - 1
    if (num.value < 1) {
      num.value = 1
    }
    let numb = Number(num.value)
    // // 获取单价和小计
    let price = tar.parentNode.previousElementSibling.innerHTML - 0
    // console.log(price)
    let subtotal = tar.parentNode.nextElementSibling
    // console.log(subtotal)
    // // 赋值
    subtotal.innerHTML = (price * num.value).toFixed(2)
    tar.parentNode.parentNode.querySelector('.check-one').checked && this.addprice()
    // this.data(tar.parentNode.parentNode.getAttribute('idd'),num.value)
    this.cl(idd2, numb)

  }
  // 发送请求更新数据库
  async cl(id, nu) {
    let res = await axios.patch('http://localhost:3000/shop/' + id, {
      total: nu
    })

  }





  // 删除
  dele(tar) {

    //    获取tr
    let tr = tar.parentNode.parentNode
    
    // console.log(tr.getAttribute('idd'))
  
    tr.remove()
    this.data(tr.getAttribute('idd'))
    // console.log(tr.getAttribute('idd'))
  }
  async data(id) {
    let res = await axios.delete('http://localhost:3000/shop/' + id)

  }
  // 获取单个节点
  $$(l) {
    return document.querySelector(l)
  }
  // 获取多个节点
  $(ele) {
    return document.querySelectorAll(ele)
  }
}
new Car